<template>
  <div>
    <!-- 新增设备 -->
    <el-dialog
      class="dialog"
      title="新增设备"
      :visible="dialogEquip"
      width="45%"
      @close="closeDialog"
      @open="openDialog"
    >
      <el-form
        ref="EquipRef"
        label-width="120px"
        :model="EquipForm"
        :rules="EquipRules"
      >
        <el-form-item label="设备编号:">
          <span>{{ '系统自动生成' }}</span>
        </el-form-item>
        <el-form-item label="选择型号:" prop="vmType">
          <el-select
            v-model="EquipForm.vmType"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in TypeEquipList"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位:" prop="nodeId">
          <el-select
            v-model="EquipForm.nodeId"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in NodeEquipList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          class="sure"
          @click="dialogEquipFn"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updataEquip, typeEquip, nodeEquip } from '@/api/vm'
export default {
  props: {
    dialogEquip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      TypeEquipList: [], // 选择型号数据
      NodeEquipList: [], // 选择点位数据
      EquipForm: {
        createUserId: 1,
        vmType: '', // 选择型号
        nodeId: '' // 选择点位
      },
      EquipRules: {
        vmType: [{ required: true, message: '请输入', trigger: 'blur' }],
        nodeId: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      page: {
        pageIndex: 1,
        pageSize: 100000
      }
    }
  },
  methods: {
    // 1.表单关闭
    closeDialog() {
      this.EquipForm = {
        vmType: '', // 选择型号
        nodeId: '' // 选择点位
      }
      this.$refs.EquipRef.resetFields()
      this.$emit('EquipcloseDialog')
    },
    // 1.2表单打开//currentPageRecords
    async  openDialog() {
      const { data } = await typeEquip(this.page)
      this.TypeEquipList = data.currentPageRecords
      const { data: data1 } = await nodeEquip(this.page)
      this.NodeEquipList = data1.currentPageRecords
    },
    // 2.新增设备表单提交
    dialogEquipFn() {
      this.$refs.EquipRef.validate(async(isOk) => {
        if (!isOk) return
        await updataEquip(this.EquipForm)
        this.$emit('addcloseEquip')
      })
    }
  }
}
</script>

<style></style>
